<style>
  :host {
    line-height: 20px;
  }

  #show {
    align-items: center;
    display: flex;
    margin-bottom: 24px;
    margin-top: 14px;
  }

  cr-radio-button {
    height: 20px;
    padding: 0;
  }

  cr-radio-button + cr-radio-button {
    margin-top: 31px;
  }

  #show cr-policy-indicator {
    --cr-icon-size: 48px;
    margin-inline-start: 48px;
  }

  #toggles {
    border: 1px solid var(--ntp-border-color);
    border-radius: 4px;
    box-sizing: border-box;
    margin-inline-end: 51px;
    margin-inline-start: 36px;
    max-width: 544px;
  }

  .toggle-row,
  .discount-toggle-row {
    align-items: center;
    display: flex;
    height: 52px;
  }

  .toggle-section + .toggle-section {
    border-top: 1px solid var(--ntp-border-color);
  }

  .toggle-name {
    flex-grow: 1;
    margin-inline-start: 24px;
  }

  .toggle-row cr-policy-indicator {
    margin-inline-end: 24px;
  }

  cr-toggle {
    margin-inline-end: 20px;
  }
</style>
<div id="show">
  <cr-radio-group selected="[[radioSelection_(show_)]]"
      disabled="[[showManagedByPolicy_]]"
      on-selected-changed="onShowRadioSelectionChanged_">
    <cr-radio-button id="hideButton" name="hide">
      [[i18n('hideAllCards')]]
    </cr-radio-button>
    <cr-radio-button id="customizeButton" name="customize">
      [[i18n('customizeCards')]]
    </cr-radio-button>
  </cr-radio-group>
  <cr-policy-indicator indicator-type="devicePolicy"
      hidden="[[!showManagedByPolicy_]]">
  </cr-policy-indicator>
</div>
<div id="toggles">
  <template id="toggleRepeat" is="dom-repeat" items="[[modules_]]">
    <div class="toggle-section">
      <div class="toggle-row">
        <div class="toggle-name">[[item.name]]</div>
        <cr-policy-indicator indicator-type="devicePolicy"
            hidden="[[!showManagedByPolicy_]]">
        </cr-policy-indicator>
        <cr-toggle checked="{{item.checked}}"
            disabled="[[moduleToggleDisabled_(show_, showManagedByPolicy_)]]">
        </cr-toggle>
      </div>
      <!-- Discount toggle is a workaround for crbug.com/1199465 and will be
      removed after module customization is better defined. Please avoid
      using similar pattern for other features. -->
      <template is="dom-if"
          if=
      "[[showDiscountToggle_(item.id, item.checked, discountToggleEligible_)]]">
        <div class="discount-toggle-row">
          <div class="toggle-name">
            [[i18n('modulesCartDiscountConsentAccept')]]
          </div>
          <cr-toggle checked="{{discountToggle_.enabled}}"></cr-toggle>
        </div>
      </template>
    </div>
  </template>
</div>
